/* 获取元素 */
const ratings = document.querySelectorAll(".rating");
const ratingsContainer = document.querySelector(".ratings-container");
const sendBtn = document.querySelector("#send");
const panel = document.querySelector("#panel");

let selectedRating = "Satisfied";
/* ratingsContainer添加点击事件 */
ratingsContainer.addEventListener("click", (e) => {
  if (
    e.target.parentNode.classList.contains("rating") &&
    e.target.nextElementSibling
  ) {
    /* 当前元素身上是否有rating类样式并且兄弟元素也存在*/
    removeActive(); /* 清除ratings中所有元素身上的active类样式 */
    /* 给当前元素添加上active类样式 */
    e.target.parentNode.classList.add("active");
    /* 将当前元素的兄弟元素内容赋值给 selectedRating*/
    selectedRating = e.target.nextElementSibling.innerHTML;
  } else if (
    e.target.parentNode.classList.contains("rating") &&
    e.target.previousSibling &&
    e.target.previousElementSibling.nodeName === "IMG"
  ) {
    /* 当前元素身上是否有rating类样式并且兄弟元素也存在并且点击的是字符 */
    removeActive(); /* 清除ratings中所有元素身上的active类样式 */
    /* 给当前元素添加上active类样式 */
    e.target.parentNode.classList.add("active");
    /* 将当前元素的兄弟元素内容赋值给 selectedRating*/
    selectedRating = e.target.innerHTML;
  }
});
const removeActive = () => {
  for (let i = 0; i < ratings.length; i++) {
    ratings[i].classList.remove("active");
  }
};
/* 按钮的点击事件 */
sendBtn.addEventListener("click", (e) => {
  panel.innerHTML = `
      <i class="fas fa-heart"></i>
      <strong>谢谢你！!</strong>
      <br>
      <strong>反馈: ${selectedRating}</strong>
      <p>我们将使用您的反馈来改善我们的客户支持</p>
  `;
});
